<template>
<div class="post" v-cloak>
    <div class="user-avatar">
        <img src="../assets/avatar.jpg" alt="">
    </div>
    <div class="article">
        <div class="username">{{post.user.username}}</div>
        <p>{{post.content}}</p>

        <img class="article-img fluid" :src="post.img" v-if="!!post.img" alt="">
        <!-- <b-img-lazy class="article-img" thumbnail v-bind="mainProps" :src="post.img" v-if="!!post.img" fluid></b-img-lazy> -->

        <div class="operation">
            <div>
                <button class="comment" @click="showCommentForm(post.user)">
                    <img src="../assets/comment.png" alt="">
                </button>
            </div>
            <div>
                <label>{{post.like.length}}</label>
                <button class="like" @click="like(post)">
                    <img :src="getLikeImg" alt="">
                </button>

            </div>
        </div>
        <div class="comments">
            <div class="one-comment" v-for="comment in post.comments" :key="comment._id">
                <hr>
                <div class="comment-body" @click="commentToComment(comment.from)">
                    <div v-if="comment.to.id==post.user.id" class="commenter">{{comment.from.username}}:</div>
                    <div v-else class="commenter">{{comment.from.username}}&emsp;回复&emsp;{{comment.to.username}}：</div>
                    <p class="comment-text">{{comment.content}}</p>
                </div>
            </div>
        </div>
        <div class="comment-form" v-show="commentFormVisibility">
            <md-field>
                <label>{{hint}}</label>
                <md-textarea v-model="comment" md-autogrow></md-textarea>
            </md-field>
            <button @click="submitComment()">
                <img src="../assets/send.png" alt="">
            </button>
        </div>
    </div>
</div>
</template>

<script>
import postApi from '../api/post'
export default {
    name: 'Post',
    props: {
        post: {
            type: Object,
            default: () => ({
                user: {
                    id: '123',
                    username: '吴泽群',
                    userAvatar: '',
                },
                content: 'To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.The function signature is:',
                img: '',
                like: ['123'],
                date: '',
                comments: [{
                    to: {
                        id: '123',
                        username: 'rock',
                        userAvatar: '',
                    },
                    from: {
                        id: '456',
                        username: 'wzq',
                        userAvatar: '',
                    },
                    content: 'ssss'
                }, {
                    to: {
                        id:'789',
                        username:'wtf',
                        userAvatar:'',
                    },
                    from: {
                        id:'78',
                        username:'宿舍男神',
                        userAvatar:'',
                    },
                    content: ' You can only specify the explicit or the implicit grid properties in a single grid declaration. '
                }, {
                    to: {
                        id:'1111',
                        username:'akb48',
                        userAvatar:'',
                    },
                    from: {
                        id:'222',
                        username:'snh48',
                        userAvatar:'',
                    },
                    content: '吹面不寒杨柳风'
                }, ],
            })
        }
    },
    data() {
        return {
            hint:'',
            commentator:null,
            comment: '',
            mainProps: {
                center: true,
                fluidGrow: true,
                blank: true,
                blankColor: '#bbb',
                width: 'auto',
                height: 'auto',
                class: 'my-5'
            },
            commentFormVisibility: false,

        }
    },
    computed: {
        
        current_user() {
            return this.$store.state.user;
        },
        liked() {
            if (this.post.like.indexOf(this.current_user.id) != -1)
                return true;
            else
                return false;
        },
        getLikeImg() {

            if (this.liked) {
                return require('../assets/like.png');

            } else {
                return require('../assets/like-empty.png');
            }
        }
    },
    methods: {
        commentToComment(user){
            this.commentator = user;
            this.hint = `回复${user.username}`;
            this.commentFormVisibility = !this.commentFormVisibility;
        },
        submitComment(){
            
            const currentUser = {
                id:this.current_user.id,
                username:this.current_user.username,
                userAvatar:this.current_user.avatar,
            };
            
            const comment = {
                postId:this.post._id,
                from:currentUser,
                to:this.commentator,
                content:this.comment,
                date:Date.now(),
            };
            postApi.commentPost(comment).then(res=>{
                window.console.log(res);
                this.commentFormVisibility = false;
                this.post.comments.push(comment)
            }).catch(err=>{
                window.console.log(err.response);
            })
        },
        showCommentForm(user) {
            this.commentator = user;
            this.hint = `评论${this.post.user.username}`;
            this.commentFormVisibility = !this.commentFormVisibility;
        },
        like(post) {
            const data = {
                postId: post._id,
                userId: this.current_user.id,
            };
            postApi.likePost(data).then(res => {
                if (this.liked) {
                    post.like.splice(post.like.indexOf(this.current_user.id), 1);
                } else {
                    post.like.push(this.current_user.id);
                }

                window.console.log(res);
            }).catch(err => {
                window.console.log(err.response);
            })

        }
    },
}
</script>

<style lang="scss" scoped>
$mobile-width:600px;
$font-family-sans-serif: // Safari for macOS and iOS (San Francisco)
-apple-system,
// Chrome < 56 for macOS (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue",
Arial,
sans-serif,
// Emoji fonts
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol" !default;

.post {
    margin-top: 2vh;
    display: flex;
    padding-top: 1rem;
    background: #409EFF;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);

}

.user-avatar {
    margin: 0 1vw;
}

.user-avatar img {
    width: 6vh;
    min-width: 3rem;
    border-radius: 50%;
}



.article {
    p {
        padding: 0 0.5rem;
        margin-bottom: 0;
        margin-top: 0.5rem;
        color: white;
        line-height: 1.5rem;
        font-size: 1rem;
    }

    .article-img {
        display: block;
        max-width: 75vw;
        border-radius: 0.2rem;
        margin:1vh auto;
    }
    @media (min-width: $mobile-width) {
    .article-img{
        max-width: 40vw;
        margin:2vh ;
        
    }
}

    .username {
        font-weight: 500;
        padding: 0.2rem 0 0 0.5rem;
        font-size: 1.2rem;
        color: rgba(0, 0, 0, .87);
        border-radius: 0.2rem;
    }

    width:100%;
    // background: #409EFF;
    border-radius: 1vh;
    margin-right: 0.2rem;
}



.operation {
    display: flex;
    // flex-direction: row-reverse;
    justify-content: flex-end;

}

.operation button {
    border: none;
    background-color: transparent;
    margin: 0 1vw 1vh auto;

    img {
        width: 3vh;
        min-width: 1.2rem;
    }
}

button:focus {
    outline: #409EFF;
}

hr {
    margin: 0;
}

.comment-body {
    display: flex;
    padding: 0.2rem;
    border-radius: 0.2rem;
    cursor: pointer;
    .commenter {
        color: rgba(0, 0, 0, .87);
        padding: 0.2rem 0 0 0.5rem;
        font-size: 1rem;
        
    }
    .comment-text{
        margin-top:0;
    }
}

.comment-form {
    padding: 1vh;
    display: flex;
    align-items: flex-end;
    width: 100%;
    background: #409EFF;

    .md-field {
        margin-bottom: 0;

    }

    button {
        display: flex;
        align-items: center;
        justify-content: center;

        border: none;
        background: transparent;
        margin-left: 1vh;

        img {
            width: 3vh;
            min-width: 1.2rem;
        }
    }
}
</style>
